<template>
  <div class="n-reconciliation">
    <van-nav-bar :title="header" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
      <van-icon name="qr" slot="right" />
    </van-nav-bar>
    <div class="dph-content">
      <div class="dph-content-text"><p>今日收款</p></div>
      <div class="dph-content-money"><p>{{ moneyText }}</p></div>
      <div class="dph-content-btn">
        <button class="dph-content-button" @click="calendarCollect">对账></button>
      </div>
    </div>
    <van-cell-group>
      <van-cell title="收款记录" is-link @click="goCollectionRecord"/>
      <van-cell v-show="!blueState" title="支付宝蓝海行动活动" value="立即报名" @click="goBlueAction" is-link/>
      <van-cell v-show="blueState" title="已参加支付宝蓝海行动" value="查看详情"  @click="goBlueDetail" is-link/>
    </van-cell-group>
    <div class="blue-show-content" v-show="blueShow">
      <div class="blue-show-box">
        <div class="blue-show-box-img"><img src="../../assets/svg/dph_sad.svg" alt=""></div>
        <div>
          <h4>支付宝蓝海行动活动报名失败</h4>
          <p>1、图片信息不全</p>
          <p>2、照片不清晰</p>
        </div>
        <van-button class="blue-btn-style" @click="closeBlue">关闭</van-button>
      </div>
      <div class="van-modal" style="z-index: 2000"></div>
    </div>
  </div>
</template>

<script>
  import { fetchCheck } from '@/api/other';
  import {
    Icon,
    Row,
    Col,
    Uploader,
    Loading,
    Cell,
    CellGroup,
    Popup,
    Button,
    NavBar,
    Toast,
    Actionsheet
  } from 'vant';

  export default {
    name: 'reconciliation',
    components: {
      [Loading.name]: Loading,
      [Toast.name]: Toast,
      [Button.name]: Button,
      [Icon.name]: Icon,
      [Uploader.name]: Uploader,
      [Row.name]: Row,
      [Col.name]: Col,
      [Cell.name]: Cell,
      [Popup.name]: Popup,
      [Actionsheet.name]: Actionsheet,
      [CellGroup.name]: CellGroup,
      [NavBar.name]: NavBar,
      [Button.name]: Button
    },
    data() {
      return {
        header: '聚合支付',
        moneyText: '2888.88',
        blueShow: false,   // 支付宝蓝海行动报名失败 true时展示提示
        blueState: false  // 支付宝蓝海行动参加状态
      };
    },
    created() {
      this.checkApi();
      console.log(22);
      const blueState = this.$route.query.blue;
      console.log(blueState);
      if (blueState === false) {  // 蓝海行动报名失败
        console.log('蓝海行动报名失败');
        this.blueShow = true;
      }
    },
    methods: {
      onClickLeft() {
        this.$router.push('/');  // 此处返回到原生页面
      },
      onClickRight() {
        this.$router.push('collectionCode');
      },
      // 进入收款记录
      goCollectionRecord() {
        this.$router.push('collectionRecord');
      },
      // 对账
      calendarCollect() {
        this.$router.push('calendar');
      },
      // 报名蓝海行动
      goBlueAction() {
        this.$router.push('uploadImages');
      },
      // 已参加蓝海行动，查看详情
      goBlueDetail() {
        this.$router.push('actionDetail');
      },
      // 关闭弹窗
      closeBlue() {
        this.blueShow = false;
      },
      checkApi() {
        // 获取首页数据
        fetchCheck()
          .then(response => {
            if (response.data) {
              this.uptoken = response.data.uptoken;
            }
          })
          .catch(res => {
            Toast('网络异常！');
          });
      }
    }
  };
</script>
<style lang="less" scoped>
  .n-reconciliation {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
   /deep/.van-nav-bar__right {
       font-size: 17px;
     }
   /deep/.van-nav-bar .van-icon {
     color: #717171;
   }
  }
  .blue-btn-style {
    width: 2.44rem;
    height: .72rem;
    line-height: .72rem;
    background-color: #2F66F3;
    border: 1px solid #2F66F3;
    margin-top: .3rem;
    color: #fff;
  }
  .blue-show-content {

    .blue-show-box {
      position: fixed;
      top: 50%;
      left: 50%;
      text-align: center;
      z-index: 2001;
      background: #fff;
      border-radius: .14rem;
      max-height: 100%;
      padding: .7rem .2rem .5rem;
      width: 70%;
      right: auto;
      bottom: auto;
      -webkit-transition: .2s ease-out;
      transition: .2s ease-out;
      -webkit-overflow-scrolling: touch;
      -webkit-transform: translate3d(-50%,-50%,0);
      transform: translate3d(-50%,-50%,0);
      &-img {
        z-index: 2002;
        position: absolute;
        left: 50%;
        top: -.8rem;
        margin-left: -.79rem;
        width: 1.58rem;
        height: 1.58rem;
        background-color: #fff;
        border-radius: 50%;
        padding: .12rem;
        img {
          width: 100%;
        }
      }
      h4 {
        font-size: 13px;
        color: #333;
        margin: .3rem 0 .2rem 0;
      }
      p {
        padding: 0;
        color: #666;
        font-size: 12px;
        margin: 0 0 .1rem;
      }
    }
  }
  .dph-content {
    margin: .3rem;
    /*width: 6.9rem;*/
    height: 3.86rem;
    text-align: center;
    border-radius: .1rem;
    background: #2F66F3;
    p {
      margin: 0;
    }
    .dph-content-text {
      padding-top: .88rem;
      p {
        color: rgba(180, 201, 255, .5);
        font-size: 11px;
      }
    }
    .dph-content-money {
      padding-top: .24rem;
      p {
        color: #fff;
        font-size: 36px;
        font-weight: bold;
      }
    }
    .dph-content-btn {
      padding-top: .4rem;
      button.dph-content-button {
        padding: 0;
        width: 2.12rem;
        height: .64rem;
        border-width: 0;
        border-radius: .32rem;
        background: #4A7DFF;
        color: #fff;
        font-size: 11px;
      }
    }
  }
</style>
